<template>
  <div>
    <h1>筛选商品</h1>
    <div>
      分类：
      <el-select
        clearable
        v-model="query.category"
        class="m-2"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in categorys"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      搜索条件：
      <el-input v-model="query.search"></el-input>
      <el-button @click="searchFn">查询</el-button>
    </div>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="proid" label="编号" width="180" />
      <el-table-column label="图片" width="180">
        <template #default="scope">
          <img class="img" :src="scope.row.img1" />
        </template>
      </el-table-column>
      <el-table-column prop="proname" label="名称" width="180" />
      <el-table-column prop="brand" label="品牌" width="180" />
      <el-table-column prop="originprice" label="价格" width="180" />
      <el-table-column prop="discount" label="折扣" width="180" />
      <el-table-column prop="sales" label="销量" width="180" />
      <el-table-column prop="stock" label="库存" width="180" />
      <el-table-column label="是否推荐">
        <template #default="scope">
          <el-switch v-model="scope.row.isrecommend" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import service from "../../../utils/service";

// 一、分类
// 定义了分类的数据
const categorys = reactive<string[]>([]);
// 获取分类
const getCategorys = () => {
  service({
    url: "/pro/getCategory",
  }).then((res) => {
    if (res.data.code == "200") {
      categorys.length = 0;
      categorys.push(...res.data.data);
    }
  });
};

getCategorys();

// 定义查询条件
const query = reactive<{
  category?: string;
  search?: string;
}>({
  category: "",
  search: "",
});

// 定义查询的结果（表格里的数据）

interface IGoods {
  brand: string;
  category: string;
  desc: string;
  discount: number;
  img1: string;
  isrecommend: number;
  issale: number;
  isseckill: number;
  originprice: number;
  proid: string;
  proname: string;
  sales: number;
  stock: number;
}

const list = reactive<IGoods[]>([]);

const searchFn = () => {
  service({
    url: "/pro/searchPro",
    method: "post",
    data: `category=${query.category}&search=${query.search}`,
  }).then((res) => {
    if (res.data.code === "200") {
      list.length = 0;
      list.push(...res.data.data);
      console.log("list", list);
    }
  });
};

searchFn();
</script>

<style scoped>
.img {
  width: 200px;
  height: 150px;
}
</style>